<template>
    <div id="app">
        <top class="top"></top>
        <left-aside class="left-aside" v-show="isAside"></left-aside>
        <div class="view" :class="{contentChange:!isAside}">
            <router-view/>
        </div>
    </div>
</template>
<script>
import Top from "./views/Top";
import LeftAside from "./views/LeftAside";
export default {
  components: { LeftAside, Top },
  data() {
    return {
      isAside: true
    };
  },
  methods: {},
  computed: {
    getIsAside() {
      return this.$store.state.isAside;
    }
  },
  watch: {
    //监听vuex的isAside值发生变化
    getIsAside(val) {
      this.isAside = val;
    }
  }
};
</script>
<style lang="stylus">
    *
        padding 0
        margin 0
    html, body
        width 100%
        height 100%
        background-color #e0e8f5
        #app
            font-family 'Avenir', Helvetica, Arial, sans-serif
            -webkit-font-smoothing antialiased
            -moz-osx-font-smoothing grayscale
            text-align center
            color #2c3e50
            height 100%
            .view
                position relative
                top 50px
                margin-left 200px
                padding 50px
            .contentChange
                margin-left 0
    @media screen and (max-width: 700px)
        body
            width 700px
</style>
